<!-- 专利详情 -->
<template>
  <view class="contain screen-width">
    <navBar :title="`专利详情`" />
    <view class="wrapper">
      <view class="title">{{ partentLsit.patentName }}</view>
      <view class="patent_item">
        <text>{{ partentLsit.typeDesc }}</text>
        <text>{{ partentLsit.legalStatus }}</text>
      </view>
      <view class="patent_content">
        <view class="patent_content_item">
          <view class="patent_content_L">申请号</view>
          <view class="patent_content_R">{{ partentLsit.noticeNumber || "--" }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">申请日</view>
          <view class="patent_content_R">{{ partentLsit.applyTime || "--" }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">公告号</view>
          <view class="patent_content_R">{{ partentLsit.applicationNumber || "--" }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">分类号</view>
          <view class="patent_content_R">{{ partentLsit.classifyNumber || "--" }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">申请人</view>
          <view class="patent_content_R">{{ partentLsit.applicant }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">发明人</view>
          <view class="patent_content_R">{{ partentLsit.inventor }}</view>
        </view>
        <view class="patent_content_item">
          <view class="patent_content_L">摘要</view>
          <view class="patent_content_R">{{ partentLsit.summary || "暂无" }}</view>
        </view>
      </view>
      <view class="table_content" v-if="false">
        <view class="table_head">
          <span class="hd_item">费用种类</span>
          <span class="hd_item">应缴金额</span>
          <span class="hd_item">服务费</span>
          <span class="hd_item">总金额</span>
          <span class="hd_item">缴费截止日</span>
        </view>
        <view class="table_body">
          <view class="table_item" v-for="(item, index) in 20" :key="index">
            <view class="table_item_00">第1年年费</view>
            <view class="table_item_00">600</view>
            <view class="table_item_00">20</view>
            <view class="table_item_00">620</view>
            <view class="table_item_00">2020.01.02</view>
          </view>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import navBar from "../../components/topBar.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    navBar
  },
  data() {
    //这里存放数据
    return {
      options: {}, // 获取专利号
      partentLsit: {} // 详情信息
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getDaillsInfo() {
      // console.log(123);
      let obj = {
        companyId: this.options.companyId,
        applicationNumber: this.options.applicationNumber
      };
      this.$get(
        "/bmj-api/api/cms/cmsPatent/patentInfo?applicationNumber=" +
          this.options.applicationNumber +
          "&companyId=" +
          this.options.companyId
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.partentLsit = res.result;
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getDaillsInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  onLoad(option) {
    console.log(option);
    this.options = option;
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.wrapper {
  // padding: 0 30rpx;
  .title {
    padding: 0 30rpx;
    font-size: 36rpx;
    font-weight: 700;
    margin: 20rpx 0;
  }
  .patent_item {
    padding: 0 30rpx;
    display: flex;
    height: 80rpx;
    align-items: center;
    text {
      border-radius: 10rpx;
      margin-right: 40rpx;
      color: #44a2ff;
      padding: 6rpx 26rpx;
      background-color: #e8f3ff;
    }
  }
  .patent_content_item {
    padding: 0 30rpx;
    margin-top: 20rpx;
    display: flex;
    .patent_content_L {
      width: 200rpx;
      font-size: 28rpx;
      color: #aaa;
    }
    .patent_content_R {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .table_content {
    margin-top: 30rpx;
    .table_head {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      color: #aaaaaa;
      font-size: 24rpx;
      .hd_item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 138rpx;
        height: 80rpx;
      }
    }
    .table_body {
      display: flex;
      flex-direction: column;
      .table_item {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #333;
        background-color: #fff;
        &:nth-child(odd) {
          background-color: #f8f8f8;
        }
        .table_item_00 {
          width: 138rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          // justify-content: center;
        }
      }
    }
  }
}
</style>
